<template>
 <div>
    <div class="label" v-if="jobId == 1 || jobId ==2">
        <!-- 搜索框 -->
        <el-row type="flex"  justify="start"  class="row-bg" style="height: 70px;margin-right: 58%">
            <el-col :span="24">
                <el-form :inline="true" :v-model="formLabel"  class="demo-form-inline" label-position="left" size="small">
                    <el-form-item label="标签名称">
                        <el-input v-model="formLabel.labelName" placeholder="请输入标签名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" circle @click="queryLabel"></el-button>
                        <el-button type="primary" @click="addLabel">新增</el-button>
                        <template>
                            <el-button type="primary" @click="deleteBranch">批量删除</el-button>
                        </template>
                        <el-button type="primary" @click="resetLabel">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!-- 表格显示 -->
        <el-row>
            <el-col :span="24">
                <el-table
                    :data="pageGoodData.list"
                    height="80vh"
                    border
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    prop="id"
                    v-if="false">
                    </el-table-column>
                    <el-table-column
                    label="序号"
                    width="100">

                    <template slot-scope="scope">
                            {{ scope.$index+1 }}
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="labelName"
                    label="标签名"
                    width="180"
                   >
                    </el-table-column>
                    <el-table-column
                    prop="labelInfo"
                    label="标签介绍"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="labelStatus"
                    label="启用状态"
                    width="180">
                    <template slot-scope="scope">
                        <el-switch
                        disabled
                        v-model="scope.row.labelStatus"
                        active-text="打开"
                        inactive-text="关闭"
                        :inactive-value="0"
                        :active-value="1"
                        @change="updateStatus">
                        </el-switch>
                    </template>
                        
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    width="350">
                    <template slot-scope="scope">
                        <el-button type="info" round  @click="updateLabel(scope.row)">修改</el-button>          
                        <el-button type="warning" slot="reference" round @click="deleteLabel(scope.row.id)">删除</el-button>
                        
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 分页 -->
        <el-row type="flex" justify="center" class="el-row">
        <el-col :span="24">
            <el-pagination
                background
                layout="prev,sizes, pager, next,total,jumper"
                :page-sizes="[1, 5, 10]"
                @next-click="nextPage"
                @prev-click="prevPage"
                @size-change="sizeChange"
                @current-change="currentPage"

                :page-size="pageGoodData.pageSize"
                :current-page="pageGoodData.pageNum"
                :total="pageGoodData.total"
                :page-count="pageGoodData.pages">
            </el-pagination>
        </el-col>
        </el-row>
        <!-- 新增或修改商品的弹出框 -->
       
            <el-dialog :modal="false" :title="addorupdate.title" :visible.sync="dialogFormVisible">
                <el-form :model="label">
                    <el-form-item label="标签名称" :label-width="formLabelWidth">
                    <el-input v-model="label.labelName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="标签介绍" :label-width="formLabelWidth">
                        <el-input v-model="label.labelInfo" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="开启状态" :label-width="formLabelWidth">
                        <el-switch
                        
                        v-model="label.labelStatus"
                        active-text="打开"
                        inactive-text="关闭"
                        :inactive-value="0"
                        :active-value="1"
                        @change="updateStatus">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addorupdateLabel">确 定</el-button>
                </div>
            </el-dialog>
     
    </div>

   <div  v-if="jobId==3">
     <h1>
       无权限*_*
     </h1>
   </div>
 </div>
</template>
<script>

export default {
    data(){
        return{
          jobId:'',

            //分页相关
            pageGoodData:{
                list:'',
                total:'',
                pageNum:1,
                pageSize:5,
                pages:''
            },
            //搜索框
            formLabel:{
                labelName:''
            },
            label:{
                id:'',//标签id
                labelName:'',//标签名
                labelInfo:'',//标签介绍信息
                labelStatus:'',//状态是否启用
                ids:[]
            },
            tableData:[],//表格数据
            //新增或修改对话框
            dialogFormVisible:false,
            addorupdate:{
                title:'',//对话框标题
            },
            formLabelWidth: '120px',
            //复选框数据
            multipleSelection:[]
        }
    },
    methods:{
        //查询标签列表
        queryLabel(){
            let jwt = localStorage.getItem("jwt");
            this.pageNum=1;
            this.$axios.get('api/label/query?labelName='+this.formLabel.labelName+ '&pageNum=' + this.pageGoodData.pageNum + '&pageSize=' + this.pageGoodData.pageSize,{headers:{"jwt":jwt}})
            .then(response =>{
                console.log(response.data);
                if(response.data.code==200){
                    this.pageGoodData = response.data.data;
                } else {
                    this.pageGoodData.list=null;
                    this.pageGoodData.pages=0;
                    this.pageGoodData.total=0;
                    this.pageGoodData.pageNum=1;
                    this.pageGoodData.pageSize=5;
                    alert('获取数据失败');
                }
                
            })
        },
        //复选框
        handleSelectionChange(val) {
            //console.log(val);
        this.multipleSelection = val;
      },
      //删除标签
      deleteLabel(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        let jwt = localStorage.getItem("jwt");
        this.$axios.get('api/label/delete?id='+id,{headers:{"jwt":jwt}})
            .then(response =>{
                if(response.data.code==200){
                    this.$message("删除成功");
                    this.queryLabel();
                } else {
                    this.$message("删除失败");
                }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

        
      },
      //点击新增按钮
      addLabel(){
        this.addorupdate.title='新增商品';
        this.label.labelName='';
        this.label.labelInfo='';
        this.label.labelStatus='';
        this.dialogFormVisible=true;
        
      },
      //点击修改按钮
      updateLabel(row){
        this.addorupdate.title='修改标签';
        this.label = row;
        this.dialogFormVisible=true;
      },
      //新增或修改标签
      addorupdateLabel(){
        if(this.addorupdate.title=='新增商品'){
            let jwt = localStorage.getItem("jwt");
            console.log(jwt);
            this.$axios.post('api/label/insert',this.label,{headers:{"jwt":jwt}})
            .then(response =>{
                if(response.data.code==200){
                    this.$message('新增成功');
                    
                } else {
                    this.$message('新增失败');
                }
                this.queryLabel();
                this.dialogFormVisible=false;
            })
        } else {
            let jwt = localStorage.getItem("jwt");
            this.$axios.post('api/label/update',this.label,{headers:{"jwt":jwt}})
                .then(response =>{
                    if(response.data.code==200){
                        this.$message('修改成功');
                    } else {
                        this.$message('修改失败');
                    }
                    this.queryLabel();
                    this.dialogFormVisible = false;
                })
        }
      },
      //分页相关
      nextPage(pageNo){
      this.pageGoodData.pageNum=pageNo;
    },
    prevPage(pageNo){
      this.pageGoodData.pageNum=pageNo;
    },
    currentPage(pageNo){
      this.pageGoodData.pageNum=pageNo;
      this.queryLabel();
    },
    sizeChange(size){
      this.pageGoodData.pageSize=size;
      if (this.pageGoodData.pageNum!=1){
        this.pageGoodData.pageNum=1;
      }else{
        this.queryLabel();
      }
    },
     // Todo 改变状态
     updateStatus(){

    },
    //重置搜索框
    resetLabel(){
        this.formLabel.labelName='';
        this.pageGoodData.pageNum=1;
        this.pageGoodData.pageSize=5;
        this.queryLabel();
    },
    deleteBranch(){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let jwt = localStorage.getItem("jwt");
            let ids=[];
            this.multipleSelection.forEach(function(e){
                ids.push(e.id)
            });
            
            //console.log(ids);
            this.$axios.post('api/label/deleteList',ids,{headers:{"jwt":jwt}})
                .then(response =>{
                    console.log(response.data)
                    if(response.data.code==200){
                        this.$message("删除成功");
                        this.queryLabel();
                    } else {
                        this.$message("删除失败");
                    }
                });
               
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },


    },
    created(){
      let jwt = localStorage.getItem("jwt");
      let account  = sessionStorage.getItem("account")
      this.$axios.get('api/users/queryJobIdByAccount?account='+account,
          {headers:{"jwt":jwt}})
          .then(response=>{
            console.log(response.data.data.jobId)
            if(response.data.code == 200 ){
              this.jobId = response.data.data.jobId
              this.queryLabel();

            }else{

            }
          })

    }
}
</script>
<style scoped>

</style>